<script setup>

import modal from "@/plugins/modal.js";

const adviceDialogOpen = ref(false)
const adviceDialogTitle = ref('')
const adviceForm = ref({})
const emits = defineEmits(['handleSubmitAdvice', 'close'])
const props = defineProps({
  title: String,
  isOpen: Boolean,
  isFromApprovalFile: Boolean,
  message: String
})

watch(() => props.isOpen, (newValue) => {
  adviceDialogOpen.value = !!newValue
  adviceDialogTitle.value = props.title
  adviceForm.value.message = props.message
})

const closeDialog = () => {
  emits('close')
}

const submitForm = () => {
  if (props.isFromApprovalFile && !adviceForm.value.message) {
    modal.alert('请先输入办理意见')
    return
  }
  emits('handleSubmitAdvice', adviceForm.value)
}

</script>

<template>
  <!-- 克隆模板对话框 -->
  <el-dialog @submit.native.prevent :title="adviceDialogTitle" v-model="adviceDialogOpen" @close="closeDialog" width="500px" append-to-body :close-on-click-modal="false">
    <el-form :model="adviceForm" ref="adviceFormRef" label-width="80px" label-position="top">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="message">
            <el-input v-model="adviceForm.message" :placeholder="`请输入${adviceDialogTitle || '办理意见'}`" type="textarea" rows="5"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>

  </el-dialog>

</template>

<style scoped lang="scss">

</style>